<template>
	<view class="home">

		<view class="top">
			<view class="menuButton" @click="showDrawer">
				<image style="width: 100%;height: 100%;" src="../../static/icons/menuButton.png" mode="center"></image>
			</view>

			<view class="searchBox" :class="{searchBoxFoucs:isInputFocused}">
				<view class="searchIcon">
					<image style="width: 100%;height: 100%;" src="../../static/icons/Iconly_Light_Search.png"
						mode="center"></image>
				</view>


				<input id="searchInput" @focus="isInputFocused = true" @blur="isInputFocused = false" type="text"
					v-model="searchWord" placeholder="Search" @confirm="goSearchPage" />
			</view>
		</view>


		<text class="slogan">
			Order online collect in store
		</text>

		<view class="goodsSection">
			<scroll-view class="selectSection" :show-scrollbar='false' scroll-x="true" scroll-left="0">
				<view @click="onClickItem(index)" v-for="(item,index) in sectionItems"
					:class="{activeUnderline:currentSection === index}" class="selectSectionItem">
					{{item}}
				</view>
			</scroll-view>

			<scroll-view class="goodsList" :show-scrollbar='false' scroll-x="true" scroll-left="0">

				<GoodItem @click="goItemDtail" v-for="item in goodsListData" :key="item.name" :goodInfo="item" />
			</scroll-view>
		</view>

		<view class="seeMore">
			seeMore →
		</view>


		<MyNavBar />

		<!-- 侧边抽屉 -->
		<uni-drawer ref="drawer" mode="left" :mask-click="true">
			<view class="drawerContent">
				<view class="top">
					<view class="topItem" @click="goProfile">
						<view class="icon">
							<image src="../../static/icons/Iconly_Light_Profile@1x-white.png"
								style="width: 100%;height: 100%;"></image>
						</view>

						<view class="title">
							Profile
						</view>
					</view>


					<view class="topItem" @click="goOrder">
						<view class="icon">
							<image src="../../static/icons/Iconly_Light_Buy@1x-white.png"
								style="width: 100%;height: 100%;"></image>
						</view>

						<view class="title">
							My orders
						</view>
					</view>

					<view class="topItem" @click="goFavorite">
						<view class="icon">
							<image src="../../static/icons/Iconly_Light_Heart@1x-white.png"
								style="width: 100%;height: 100%;"></image>
						</view>

						<view class="title">
							Favorites
						</view>
					</view>

					<view class="topItem">
						<view class="icon">
							<image src="../../static/icons/Iconly_Light_Bag@1x-white.png"
								style="width: 100%;height: 100%;"></image>
						</view>

						<view class="title">
							Delivery
						</view>
					</view>

					<view class="topItem">
						<view class="icon">
							<image src="../../static/icons/Iconly_Light_Setting@1x-white.png"
								style="width: 100%;height: 100%;"></image>
						</view>

						<view class="title">
							Settings
						</view>
					</view>
				</view>

				<view class="bottom">
					<view class="topItem" @click="signOut">
						<view class="icon">
							<image src="../../static/icons/Iconly_Light_Logout@1x-white.png"
								style="width: 100%;height: 100%;"></image>
						</view>

						<view class="title">
							Settings
						</view>
					</view>
				</view>
			</view>
		</uni-drawer>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		PRIMARY_COLOR
	} from '../../constants/color';

	// 选项
	const sectionItems = ref([
		"Wearable",
		"Laptops",
		"Phones",
		"Drones"
	])

	const styleType = ref('text')

	// 当前选项索引
	const currentSection = ref(0)

	const onClickItem = (currentIndex) => {
		if (currentSection.value !== currentIndex) {
			currentSection.value = currentIndex
		}
	}

	// 商品数据
	const goodsListData = ref([{
			cover: "../../static/images/home/appleWatch.png",
			name: "Apple Watch",
			category: "Series 6 . Red",
			price: "359"
		},
		{
			cover: "../../static/images/home/samsumWatch.png",
			name: "SAMSUNG Galaxy Watch",
			category: "Active . Green",
			price: "159"
		}, {
			cover: "../../static/images/home/appleWatch.png",
			name: "Apple Watch",
			category: "Series 6 . Red",
			price: "359"
		},
		{
			cover: "../../static/images/home/samsumWatch.png",
			name: "SAMSUNG Galaxy Watch",
			category: "Active . Green",
			price: "159"
		}
	])

	// 搜索关键字
	const searchWord = ref("")

	// 搜索跳转搜索结果页
	const goSearchPage = () => {
		uni.navigateTo({
			url: `/pages/search/search?searchword=${searchWord.value}`,
		})
	}

	// 输入框是否聚焦
	const isInputFocused = ref(false)



	// 跳转详情页面
	const goItemDtail = () => {
		uni.navigateTo({
			url: '/pages/singleItem/singleItem'
		})
	}


	const drawer = ref(null)
	// 打开抽屉
	const showDrawer = () => {
		drawer.value.open()
	}

	// 跳转个人信息
	const goProfile = () => {
		uni.navigateTo({
			url: '/pages/myProfile/myProfile'
		})
	}

	// 跳转个人喜爱
	const goFavorite = () => {
		uni.navigateTo({
			url: '/pages/favorite/favorite'
		})
	}

	// 跳转订单
	const goOrder = () => {
		uni.navigateTo({
			url: '/pages/orderHistory/orderHistory'
		})
	}


	// 退出应用
	const signOut = () => {
		// #ifdef APP-PLUS

		uni.showModal({
			title: '退出应用',
			content: '补药啊',
			showCancel: true, // 是否显示取消按钮，默认为true
			cancelText: "留下",
			confirmText: '只能离开', // 确定按钮的文字，最多4个字符
			success: function(res) {
				if (res.confirm) {
					if (plus.os.name.toLowerCase() === 'android') {
						plus.runtime.quit();
					} else {
						const threadClass = plus.ios.importClass("NSThread");
						const mainThread = plus.ios.invoke(threadClass, "mainThread");
						plus.ios.invoke(mainThread, "exit");
					}
				}

			},
		});

		// #endif

	}
</script>

<style scoped lang="scss">
	.home {
		width: 100vw;
		min-height: 100vh;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: center;
		background-color: #F2F2F2;
		padding-bottom: 150rpx;

		.top {
			width: 100%;
			height: 120rpx;
			padding: 0 80rpx;
			margin-top: 94rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 52rpx;

			.menuButton {
				width: 44rpx;
				height: 29rpx;
			}

			.searchBox {
				width: 100%;
				height: 120rpx;
				border-radius: 60rpx;
				border: 4rpx solid rgba(134, 134, 134, 1);
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 24rpx;

				.searchIcon {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}


		.slogan {
			margin-top: 110rpx;
			width: 100%;
			padding-left: 70rpx;
			padding-right: 100rpx;
			height: 160rpx;
			font-size: 68rpx;
			font-weight: 700;
			letter-spacing: 0px;
			text-align: start;
			// line-height: 0px;
			color: rgba(0, 0, 0, 1);
		}

		.goodsSection {
			margin-top: 112rpx;
			width: 100%;
			padding-left: 70rpx;
		}

		.selectSection {
			width: 100%;
			white-space: nowrap;
		}

		.selectSectionItem {
			display: inline-block;
			width: fit-content;
			height: fit-content;
			text-align: center;
			margin: 0 30rpx;

			font-size: 34rpx;
			font-weight: 600;
			letter-spacing: 0px;
			line-height: 19.96px;
			color: rgba(154, 154, 157, 1);
			padding-bottom: 20rpx;
			text-align: center;

			&:nth-child(1) {
				margin-left: 0;
			}
		}

		.activeUnderline {
			color: rgba(89, 86, 233, 1);
			border-bottom: 6rpx solid rgba(89, 86, 233, 1);
		}


		.goodsList {
			margin-top: 134rpx;
			width: 100%;
			white-space: nowrap;
		}

		.seeMore {
			padding-right: 56rpx;
			margin-top: 29px;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: end;
			font-size: 30rpx;
			font-weight: 700;
			letter-spacing: 0px;
			line-height: 35.2px;
			color: rgba(89, 86, 233, 1);
			align-items: center;


			&:active {
				opacity: 0.8;
			}
		}
	}

	.searchBoxFoucs {
		border: 4rpx solid rgba(89, 86, 233, 1) !important;
	}

	.drawerContent {
		width: 100%;
		height: 100%;
		background-color: rgba(89, 86, 233, 1);
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		justify-content: space-around;


		.bottom {
			padding: 0 80rpx;
		}

		.top,
		.bottom {
			display: flex;
			flex-direction: column;
			align-items: start;
			justify-content: center;
			gap: 100rpx;
			width: 100%;
			height: fit-content;


			.topItem {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				gap: 17rpx;
				width: 100%;

				.icon {
					width: 48rpx;
					height: 48rpx;
				}

				.title {
					font-size: 34rpx;
					font-weight: 600;
					letter-spacing: 0px;
					line-height: 19.96px;
					color: rgba(255, 255, 255, 1);
				}
			}
		}
	}
</style>